<%-- 
    Document   : index
    Created on : 05-ago-2012, 14:54:50
    Author     : Administrador
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"
             import ="data.Dao"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>

    <head>
    	<meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
        <meta name="description" content="Pagina web de cine" />
        <meta name="keywords" content="peliculas, estrenos,cine, actualidad, panoramas" />
        <meta name="author" content="CodecsCinema" />

        
    	<title>CodecsCinema</title>
                         <jsp:useBean class="data.Dao" id="peliculas"/>

        <script type="text/javascript">
            function agregar(){
    	    var tipo = document.getElementById("var_search_type").options[document.getElementById("var_search_type").selectedIndex].label;
            <c:forEach var="pelicula" items="${peliculas.peliculas}">
            if(tipo==<c:out value="${pelicula.titulo}"></c:out>){
            var padreul=document.getElementById("galleria");
            var movienew=document.createElement("li")();
            var figure=document.createElement("figure");
            var imagenew=document.getElementById("a");
            imagenew.setAttribute("href",<c:out value="${pelicula.poster}"></c:out>);
            imagenew.setAttribute("width","304");
            imagenew.setAttribute("height","228");
            imagenew.setAttribute("onmouseover","stopAnimation()");
            imagenew.setAttribute("onmouseout","continueAnimation()");
            figure.setAttribute(imagenew);
            
            figure.setAttribute("figcaption",<c:out value="${pelicula.titulo}"></c:out>);
            movienew.appendChild(figure);
            padreul.appendChild(movienew));
         } 
        </c:forEach>
         } 
            </script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript" src="javaSc/galeryImage.js"></script>
		<script type="text/javascript" src="javaSc/show.js"></script>
        <script type="text/javascript" src="javaSc/animacionesCabecera.js"></script>
        <script type="text/javascript" src="javaSc/Jquery.js"></script>
	    <script type="text/javascript" src="javaSc/mostraemails.js"></script>
        <script type="text/javascript" src="javaSc/consultas.js"></script>
		<script type="text/javascript" src="javaSc/cambiarestilo1.js"></script>
        <link rel="stylesheet" type="text/css" href="principal22.css" id="css1"/>        
        <link rel="stylesheet" type="text/css" href="css/box-properties.css"  id="css"/>
        <link rel="stylesheet" type="text/css" href="css/demo.css"/>
        <link rel="stylesheet" type="text/css" href="empty.css" id="css2" />
        <link rel="stylesheet" type="text/css" href="css/style3.css"/>
		<link rel="stylesheet" type="text/css" href="empty.css" id="css3"/>
		<link rel="stylesheet" type="text/css" href="css/animate-custom.css"/>
    </head>
    
    <body>
	    <section id="contenedor">
            <header id="cabecera">
                <figure id="logo">
				     <img class="img" src="img/logo1_2.gif" alt="logotipo"  width="200" height="100" />
				</figure>
				  <nav id="menu">
                    <ul class="menu">
                        <li><a href="#" ><span>Inicio</span></a></li>
                        <li><a href="teatro/teatro.htm" ><span>Cartelera</span></a></li>
                        
                        <li><a href="#"><span>Contactanos</span></a></li>
                        <li class="last"><a href="#" class="parent"><span>Mi cuenta</span></a>
                            <div><ul>
                                <li><a href="#" onclick="activarlog()"><span>Login</span></a></li>
                                <li><a href="#"><span>Registro</span></a></li>                                
                            </ul></div>
                        </li>
                    </ul>
                </nav> 
				<a href="#" onclick="cambiarestilo()">Estilo 1</a>
				<a href="#" onclick="cambiarestilo1()">Estilo 2</a>
            
	        </header>
         
       
        <section id="animaciones">
            <nav class="gallery">      

              
               
			<ul id="galleria">           
                            <c:forEach var="pelicula" items="${peliculas.peliculas}">
      
              		     <li id="<c:out value="${pelicula.idPelicula}"></c:out>">
                                                  <figure>
							<a href="#" ><img class="f" src="<c:out value="${pelicula.poster}"></c:out>" alt="<c:out value="${pelicula.poster}"></c:out>" onmouseover="stopAnimation()" onmouseout="continueAnimation()" width="304" height="228"/> </a>
							<figcaption> <c:out value="${pelicula.titulo}"></c:out><a href="#" onclick="eliminar(<c:out value="${pelicula.idPelicula}"></c:out>)"><img src="img/close.png" class="iconodelete" width="20px" height="20px" /></a> </figcaption>
						</figure>
                                               
                                           
			     </li>
                            </c:forEach>   
                                   <c:forEach var="pelicula" items="${peliculas.peliculas}">
      
              		     <li id="<c:out value="${pelicula.idPelicula}"></c:out>">
                                                  <figure>
							<a href="#" ><img class="f" src="<c:out value="${pelicula.poster}"></c:out>" alt="<c:out value="${pelicula.poster}"></c:out>" onmouseover="stopAnimation()" onmouseout="continueAnimation()" width="304" height="228"/> </a>
							<figcaption> <c:out value="${pelicula.titulo}"></c:out><a href="#" onclick="eliminar(<c:out value="${pelicula.idPelicula}"></c:out>)"><img src="img/close.png" class="iconodelete" width="20px" height="20px" /></a> </figcaption>
						</figure>
                                               
                                           
			     </li>
                             </c:forEach>                               
		        </ul>
	        </nav>
                     <section id="agregar">
                         <h1><a href="#">Agregar im&aacute;genes a la galer&iacute;a</a></h1>
        <section>
                
        	<span>Nombre de pel&iacute;culas</span>
            <select id="var_search_type" onChange="">
            	<c:forEach var="pelicula" items="${peliculas.peliculas}">
                <option><c:out value="${pelicula.titulo}"></c:out></option>
            	 </c:forEach>
            </select>
            
            <input type="button" value="Agregar" onClick="agregar();"/>
        </section>
               </section>
			
         <section id="slide1" >
                    <div id="slider">
                		<div id="mask">
                			<ul>
                				<li>
                					<a href="pelicula/pelicula.html" title="Ver m&aacute;s">
                                    
                                        <img src="img/AS.jpg" alt="Amazingspiderman3"/>
                                        <span>
                                            The amazing Spiderman<br/>Peter Parker
                    				    </span>
                                    
                                    </a>
                                </li>
                                
                				<li>
                                    
                					<a href="pelicula/pelicula.html" title="Ver m&aacute;s">
                                        <img src="img/madag.jpg" alt="Madagascar3"/> 
                    					<span>
                    						Madagascar 3 <br/>Europe
                    					</span>
                                    </a>
                				</li>
                                
                                <li>
                					<a href="pelicula/pelicula.html" title="Ver m&aacute;s">
                                        <img src="img/prometheus.jpg" alt="Prometheus"/>
                    					<span>
                    						Prometheus<br/>
                    						La verdad del inicio...
                    					</span>
                                    </a>
                				</li>

                				<li>			
                					<a href="pelicula/pelicula.html" title="Ver m&aacute;s">
                                        <img src="img/iceage.jpg" alt="Era del hielo"/>
                                        <span>
                    						La era del hielo 4<br/>
                    						Ice age
                    					</span>
                                    </a>
                				</li>
                			</ul>
                		</div>
                		<div id="progress"></div>
                		<!--div id="pause"></div-->
                	</div>                    
                </section>
                
                <section id="video">
                    <p>Bienvenidos</p>
                    <video id="01" controls="controls" width="320" height="240">			
                        <source src="Astronautas.mp4" type='video/mp4'/>
			        </video>        
                </section>
       </section>
       
        <section class="clear"></section>
        
		<section id="contentmenu">
         <nav id="menu2">
			<ul>
				<li id="informacion"><a href="#" onclick='showTu("content1")'> Informaci&oacute;n</a></li>
				<li ><a href="teatro/teatro.htm" >Cartelera </a></li>
				<li id="pelicula_destacada"><a href="#" onclick='showTu("content3")'>Pel&iacute;culas Destacadas </a></li>
               	<li id="busqueda"><a href="#" onclick='showTu("content4")'> Buscar pel&iacute;cula</a></li>
              	<li id="itur"><a href="#" onclick='showTu("content5")'>Contacto </a></li>
			
			</ul>		
            
            </nav>
		</section>
			
            <section class="clear"></section>
        
        <section id="content">	 
		    <section id="content1">
    			<video id="0" controls="controls" width="320" height="240">			
                    <source src="Astronautas.mp4" type='video/mp4'/>
    			</video>
			</section>
            
			<section id="content2"><p></p></section>
	
	        <section id="content3">
			        <div id="efectozoom">
                     <ul class="thumb">
                        <a href="pelicula/pelicula.html"><li><img src="img/poster1.jpg" title="pelicula1" alt="gal"/></li></a>
                        <a href="pelicula/pelicula.html"><li><img src="img/poster2.jpg" title="pelicula2" alt="gal"/></li></a>
                        <a href="pelicula/pelicula.html"><li><img src="img/poster3.jpg" title="pelicula3" alt="gal"/></li></a>
                        <a href="pelicula/pelicula.html"><li><img src="img/poster4.jpg" title="pelicula4" alt="gal"/></li></a>
                        <a href="pelicula/pelicula.html"><li><img src="img/poster5.jpg" title="pelicula5" alt="gal"/></li></a>
                        <a href="pelicula/pelicula.html"><li><img src="img/poster6.jpg" title="pelicula6" alt="gal"/></li></a>
                        <a href="pelicula/pelicula.html"><li><img src="img/poster7.jpg" title="pelicula7" alt="gal"/></li></a>
                        <a href="pelicula/pelicula.html"><li><img src="img/poster8.jpg" title="pelicula8" alt="gal"/></li></a>
                        <a href="pelicula/pelicula.html"><li><img src="img/poster9.jpg" title="pelicula9" alt="gal"/></li></a>
                    </ul>
			</div>
			</section>
            
            <section id="content4">
			    <section id="buscarpelicula">
				<select id="ddlbusca">
	            <option value="1">Nombre</option>
	            <option value="2">Ciudad</option>
				<option value="3">Cine</option>
	             </select>
                 <input id="criterio" name="criterio" required="required" type="text" placeholder="Buscar..." /> 
				 <button id="buscar" onclick="destacadas()">Busqueda</button>
				 </section>
				 <section id="resultados">
				 </section>				 
			</section>
		
            <section id="content5"  >
				<div id="contacto">
					<h2>Contactenos </h2>
					<p>Si usted desea comunicarse con nuestro establecimiento la siguiente informaci&oacute;n le ser&aacute; de mucha utilidad.</p>
					<h3>DIRECCION</h3>
					<p>Calle 9 de Octubre y Rumichaca</p>
					<h3>HORARIOS DE ATENCION</h3>
					<p>De lunes a domingo de 12H30 a 24H00</p>
					<h3>TELEFONO</h3>
					<p>PBX: 042582262</p>
					<h3>CORREOS ELECTRONICOS</h3>
					<button id="button" onclick="showMails(1)">Ver</button>
				</div>
					<table id="infocontactos" style="display:none">
						<tbody>
							<tr>
								<td>Administradores</td>
								<td>Correos electr&oacute;nicos</td>
								<td>Tel&eacute;fono</td>
							</tr>
							
							<tr>
								<td>Harry Carpio</td>
								<td>hcarpio@espol.edu.ec</td>
								<td>085587079</td>
							</tr>
						
							<tr>
								<td>Anibal Vasquez</td>
								<td>aniavasq@espol.edu.ec</td>
								<td>095499121</td>
							</tr>
							
							<tr>
								<td>Roger Granda</td>
								<td>rxgranda@espol.edu.ec</td>
								<td>098483253</td>
							</tr>
							
							<tr>
								<td>Edgar Villaceca</td>
								<td>esvillac@espol.edu.ec</td>
								<td>091281948</td>
							</tr>
							
						</tbody>
					</table>
					<h3>Porque su opinion es importante</h3>
					<h3>Cualquier duda o sugerencia escribala a nuestro buzon</h3>
					<div id="registro">
						<form onsubmit="return validarform(this)" method="post">
							<table style="align:center; border:0px">
							<tr>
							<td style="align:left; width:100px">Nombre:
							</td>
							<td style="width:150px; align:center"><input name="nombre" maxlength="25" type="text" value=""/>
							</td>
							</tr>
							<tr>
							<td style="width:100px; align:left">Email:
							</td>
							<td style="width:150px; align:center"><input name="email" maxlength="25" type="text" value=""/>
							</td>
							</tr>
							<tr>
							<td style="width:100px; align:left">Motivo:
							</td>
							<td style="width:150px; align:center"><input name="motivo" maxlength="25" type="text" value=""/>
							</td>
							</tr>
							<tr>
							<td style="width:100px align:left"> Mensaje:
							</td>
							<td><textarea name="mensaje" rows="10" cols="20">
							</textarea>
							</td>
							</tr>
							<tr>
							<td style="width:100px">
							</td>
							<td style="width:150px;align:right"><input name="boton" type="submit" value="enviar"/>
							</td>
							</tr>
							</table>
						</form>
					</div>
            </section>
            
			<section id="sociales">                    
                    <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
                    <script>
                    new TWTR.Widget({
                      version: 2,
                      type: 'profile',
                      rpp: 6,
                      interval: 30000,
                      width: 250,
                      height: 300,
                      theme: {
                        shell: {
                          background: '#333333',
                          color: '#ffffff'
                        },
                        tweets: {
                          background: '#000000',
                          color: '#ffffff',
                          links: '#4aed05'
                        }
                      },
                      features: {
                        scrollbar: false,
                        loop: false,
                        live: true,
                        behavior: 'all'
                      }
                    }).render().setUser('CodecsCinema').start();
                    </script>
                    <a href="https://twitter.com/CodecsCinema" class="twitter-follow-button" data-show-count="false">Follow @CodecsCinema</a>
                    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
                  <iframe src="//www.facebook.com/plugins/facepile.php?href=http%3A%2F%2Fwww.facebook.com%2FCodecsCinema&amp;action&amp;size=medium&amp;max_rows=1&amp;width=250&amp;colorscheme=dark" style="border:none; overflow:hidden; width:250px;"></iframe>
                
                </section>
        </section>
		<section class="clear"></section>
        <footer id="page"><p>Copyrigth DAW FIEC ESPOL</p></footer>
    
    </section>
	<div id="logg" class="LoginOculto">
                <div id="container_demo" >
                    <!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->
                    <a class="hiddenanchor" id="toregister"></a>
                    <a class="hiddenanchor" id="tologin"></a>
                    <div id="wrapper">
                        <div id="login" class="animate form">
                         <img src="img/close.png" style="width:20px; height: 20px; z-index: 2; cursor: pointer;" onclick="cerrar()" alt="close" />
                  
                            <form  action="mysuperscript.php" autocomplete="on"> 
                                <h1>Log in</h1> 
                                <p> 
                                    <label for="username" class="uname" data-icon="u" > Your email or username </label>
                                    <input id="username" name="username" required="required" type="text" placeholder="myusername or mymail@mail.com"/>
                                </p>
                                <p> 
                                    <label for="password" class="youpasswd" data-icon="p"> Your password </label>
                                    <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" /> 
                                </p>
                                <p class="keeplogin"> 
									<input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> 
									<label for="loginkeeping">Keep me logged in</label>
								</p>
                                <p class="login button"> 
                                    <input type="submit" value="Login" /> 
								</p>
                                <p class="change_link">
									Not a member yet ?
									<a href="#toregister" class="to_register">Join us</a>
								</p>
                            </form>
                        </div>

                        <div id="register" class="animate form">
                         <img src="img/close.png" style="width:20px; height: 20px; z-index: 2; cursor: pointer;" onclick="cerrar()" alt="close" />
                  
                            <form  action="mysuperscript.php" autocomplete="on"> 
                                <h1> Sign up </h1> 
                                <p> 
                                    <label for="usernamesignup" class="uname" data-icon="u">Your username</label>
                                    <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" />
                                </p>
                                <p> 
                                    <label for="emailsignup" class="youmail" data-icon="e" > Your email</label>
                                    <input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="mysupermail@mail.com"/> 
                                </p>
                                <p> 
                                    <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>
                                    <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/>
                                </p>
                                <p> 
                                    <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label>
                                    <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/>
                                </p>
                                <p class="signin button"> 
									<input type="submit" value="Sign up"/> 
								</p>
                                <p class="change_link">  
									Already a member ?
									<a href="#tologin" class="to_register"> Go and log in </a>
								</p>
                            </form>
                        </div>
						
                    </div>
                </div>  

		</div>        

		 <aside id="aside">
			<nav>
				<ul>
				<li><a id="fb" href="#"><img src="img/facebook_icon.jpg" width="30" height="30" alt="fbIcon"/></a></li>
				<li><a id="t" href="#"><img src="img/twiter_icon.jpg" width="30" height="30" alt="twtIcon"/></a></li>
				<li><a id="gp" href="#"><img src="img/google_plus_icon.jpg" width="30" height="30" alt="gplusIcon"/></a></li>
				</ul>
			</nav>
		</aside>
		    <div id="glass"></div>
    </body>
</html>
